<template>
  <div class="banner" v-if="bannerImages.length">
    <van-swipe class="swipe-border" :autoplay="3000">
      <van-swipe-item v-for="(item, index) in bannerImages" :key="index">
        <van-image fit="cover" :src="item.img" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
  import {
    mapMutations,
    mapState
  } from 'vuex'
  export default {
    name: 'swIpe',
    methods: {
      ...mapMutations(['SET_BANNER_IMAGES']),
      getBannerImages() {
        this.$api.homeData.banner().then(res => {
          this.SET_BANNER_IMAGES(res.data)
        })
      }
    },
    computed: {
      ...mapState(['bannerImages'])
    },
    created() {
      this.getBannerImages()
    }
  }
</script>

<style>
  .swipe-border {
    background: #dcdee0;
    margin: auto;
    width: 90vw;
    border-radius: 10px;
  }
</style>
